<script setup>
import { useRouter } from 'vue-router'
import { state } from '@/stores/localstorage'
import { LOGOUT } from '@/api/logout'
import { Message } from '@arco-design/web-vue'
const router = useRouter()
// 这个Login对象不是一个响应式数据
// 怎么把Login对象变成一个响应式数据，需要监听localStorage的key变化
// 这种组件已经有人写过了，Vue 有个专门的vue社区的共享库的网站：vue use
// 基于Vue组合式API的实用工具集: https://www.vueusejs.com/
// 使用里面函数：
const logOutHandller = async () => {
  // localStorage.removeItem('isLogin')
  try {
    let resp = await LOGOUT(state.value.username)
    console.log(resp)
    Message.success({
      content: '用户已退出',
      duration: 1000
    })
    state.value.isLogin = false
    state.value.username = ''
    router.push({ name: 'LoginPage' })
  } catch (error) {
    Message.error({
      content: `推出失败: ${error}`,
      duration: 5000
    })
  }
}
const logInHandller = () => {
  router.push({ name: 'LoginPage' })
}
const backendManageHandller = () => {
  router.push({ name: 'BackendBlogList' })
}
const frontendHandller = () => {
  router.push({ name: 'FrontendBlogList' })
}
</script>

<template>
  <div>
    <a-space>
      <!-- 导航区 -->
      <div class="nav">
        <!-- Logo显示区 -->
        <div>Go 14微博客系统</div>
        <div class="to-backend">
          <a-button @click="backendManageHandller">后台管理</a-button>
          <div v-if="state.isLogin">
            <a-button @click="frontendHandller">前台浏览</a-button>
            <a-button @click="logOutHandller">退出</a-button>
          </div>
          <div v-else>
            <a-button @click="logInHandller">登录</a-button>
          </div>
        </div>
      </div>
      <!-- 使用router-link组件来进行路由跳转 -->
      <!-- <router-link to="/">Go to Home</router-link>
      <router-link to="/frontend/test">Go to test</router-link>
      <router-link to="/frontend/test/v2">Go to testv2</router-link> -->
      <!-- 使用编成方式跳转 -->
      <!-- <a-button type="primary" @click="router.push('/')">Go to Home</a-button>
      <a-button @click="router.push('/frontend/test')">Go to Test</a-button>
      <a-button @click="router.push('/frontend/test/v2')">Go to Testv2</a-button> -->
    </a-space>
    <div class="main-content">
      <RouterView />
    </div>
  </div>
</template>

<style scoped>
.nav {
  height: 60px;
  display: flex;
  width: 100vw;
  align-items: center;
  padding: 0 8px;
  border-bottom: 1px solid rgb(229, 230, 235);
  background-color: #fff;
}
.to-backend {
  margin-left: auto;
  display: flex;
}
.main-content {
  height: calc(100vh - 60px - 80px);
}
</style>
